<template>
	<view>

        <view class="ranking-item sell-well">
            <view class="text">数据每天更新 最近更新{{27}}号</view>
            <view class="btn-area" @click="show()">
                <img class="zuobiao" src="@/static/img00/zuobiao.png" alt="">
                <span>{{qu_name}}</span>
                <img class="pull" src="@/static/img00/unfold.png" alt="">
            </view>
        </view>
		
        <view class="list-wrap" style="position: relative;">
			
			<view :class="is_qu_block==1 ?'area-choice on':'area-choice'" >
				<ul class="choice-list">
					<li class=""><a href="javascript:;">全城</a>
					</li>
			
					<li v-for="(item, index) in qures" :key="index" :class="qu_index==index ?'on':' '">
						<a @click="selects(item.id,index,item.name)" >{{item.name}}</a>
					</li>
					
				</ul>
			</view>
			
			
            <ul class="nav">
				<li v-for="(item,index) in navList" :key="index" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index)'>
					{{item.name}} 
				</li>
			</ul>


            <view ><!--此处可以换成子组件-->
                <recommend :jdata="lists"></recommend>

            </view>

            
        </view>

 
	</view>
</template>

<script>

    import recommend from 'pages/index/recommend' ;
    import Fangyuan from 'pages/index/fiery/Fangyuan';

	export default {
        
        components: {
           recommend,
           Fangyuan
        },
        data() {
			return {
				is_qu_block:0,
				qu_name:'临安区',
				qu_id:14,
				qu_index:7,
				menuIndex:0,
				type:'one_list',
				navList:[
					{name:"人气榜"},
					{name:"热销榜"},
                    {name:"热搜榜"},
				],	
				qures:{},
				// qu_index:0,
				
				lists:{}
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				let _this = this;
				this.$api.getLoupanList({
						type:_this.type,
						qu_id:_this.qu_id
					},
					res => {
						console.log(res);
						_this.qures = res.qures;
						_this.lists = res.res;
					}
				);
				
			},
			menuShow (index) {
				this.menuIndex = index;
				if(index == 0){
					this.type = 'one_list';
				}
				if(index == 1){
					this.type = 'two_list';
				}
				if(index == 2){
					this.type = 'three_list';
				}
				this.initData();
			},
			show(){
				if(this.is_qu_block == 1){
					this.is_qu_block = 0
				}else{
					this.is_qu_block = 1;
				}
			},
			selects(id,index,name){
				console.log(id);
				this.qu_id = id;
				this.qu_index = index;
				this.qu_name = name;
				this.is_qu_block = 0;
				
				this.initData();
			}
		}
	}
</script>

<style scoped>
    *{
        margin: 0 ;
        padding: 0;
        list-style: none;
    }
    .ranking-item{

        height: 320rpx;
        background: url("../../../static/img00/ranking.png");
        background-size:100% 100%;
    }
    .text{
        color: #fff;

        font-size: 24rpx;
        padding-top: 180rpx;
        margin-left: 40rpx;
    }

    .btn-area{
        width: 192rpx;
        height: 48rpx;
        background: #ffbe36;
        -webkit-border-radius:140rpx;
        -moz-border-radius:140rpx;
         margin-left: 40rpx;
         margin-top: 20rpx;
    }
    .zuobiao{
        width: 24rpx;
        height: 24rpx;
        margin-left: 20rpx;
    }

    .btn-area>span{
        color: #fff;

        font-size: 24rpx;
        margin-left: 10rpx;
    }

    .pull{
        height: 24rpx;
        width: 24rpxm;
           margin-left: 10rpx;
    }

    .nav{
		/* width: 30rem; */
		display: flex;
		flex-wrap: nowrap;
		margin: 0 auto;

		padding-bottom: 10rpx;
        padding-top: 20rpx;
        border-bottom: 1px solid #e2e9f0;
	}
	.nav>li{
		height: 54rpx;
		width: 33.3%;
		text-align: center;
		line-height: 54rpx;
        color: #000;
		font-size: 32rpx;
        border-radius:6rpx;   
        margin-left: 20rpx;
        /* background: #f3f6f9; */
	}
	.active{
        border-bottom: 4rpx solid #13c3c3;     
        font-weight: 550;
	}
	
	
	.area-choice{
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;
		display: none;
		width: 100%;
		background: #fff;
		padding: 9.6rpx;
		overflow: hidden;
		z-index: 999;
	}
	
	.choice-list {
	    box-sizing: border-box;
	    /* max-height: 154.6rpx;
	    min-height: 29.2rpx; */
	    padding-bottom: 9.6rpx;
	    overflow-y: auto;
	}
	
	.choice-list li {
	    float: left;
	    margin: 30rpx 30rpx 0 0;
	}
	
	.choice-list li a {
	    box-sizing: border-box;
	    display: block;
	    width: 150rpx;
	    /* height: 16rpx; */
	    font-size: 7.4rpx;
	    color: #77808a;
	    text-align: center;
	    /* line-height: 16rpx; */
	    padding: 8rpx;
	    background: #f4f6f9;
	    border-radius: 1rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.choice-list li.on a {
	    color: #13c3c3;
	    background: #e2f7fe;
	}
	a:link {
	    text-decoration: none;
	}
	.list-wrap .on{ display: block;}
</style>
